<template>
  <div class="app-container">
    <!-- 分页查询 -->
    <el-form
      ref="queryParams"
      :model="queryParams"
      size="small"
      label-suffix=":"
      label-width="auto"
    >
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-form-item :label="$t('statusLang.status')" prop="orderStatus">
            <el-select
              v-model="queryParams.orderStatus"
              :placeholder="$t('pleaseSelect')"
              style="width: 200px"
              clearable
            >
              <el-option
                v-for="item in deliveryStatusOptions"
                :key="item.value"
                :value="item.value"
                :label="$t('statusLang.' + item.title)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item :label="$t('depotLang.depot')" prop="depotId">
            <el-select
              v-model="queryParams.depotId"
              :placeholder="$t('pleaseSelect')"
              style="width: 200px"
            >
              <el-option
                v-for="item in depotListAllStatusList"
                :key="item.value"
                :value="item.value"
                :label="$t(item.title)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item :label="$t('harvestLang.orderNumber')" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              type="textarea"
              autosize
              :placeholder="
                $t('pleaseEnter') + ' , ' + $t('MultipleSpacesSeparated')
              "
              style="width: 260px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-form-item label="">
            <template>
              <el-select
                v-model="queryParams.dateType"
                @change="changeDateType"
              >
                <el-option
                  v-for="item in dateTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="$t(item.title)"
                />
              </el-select>
            </template>
            <el-date-picker
              v-model="queryParams.dateTime"
              type="datetimerange"
              value-format="timestamp"
              :range-separator="$t('to')"
              :start-placeholder="$t('beginDate')"
              :end-placeholder="$t('endDate')"
              @change="changeDateTime"
            />
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item
            :label="$t('harvestLang.customerName')"
            prop="customerName"
          >
            <el-select
              v-model="queryParams.customerId"
              :placeholder="$t('pleaseSelect')"
              clearable
              filterable
              style="width: 200px"
            >
              <el-option
                v-for="item in customerOptionList"
                :key="item.value"
                :value="item.value"
                :label="item.title"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1.5">
          <el-form-item :label="$t('goodsSKULang.skuCode')" prop="skuCode">
            <el-input
              v-model="queryParams.skuCode"
              :placeholder="$t('pleaseEnter')"
              style="width: 200px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="handleQuery"
          >
            {{ $t("query") }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh-left"
            @click="handleReset"
          >
            {{ $t("reset") }}
          </el-button>
          <el-button type="primary" size="small" icon="el-icon-download" @click="handleExport">
            {{ $t('goodsSKULang.imports') }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据列表 -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      :header-cell-style="{
        height: '40px',
      }"
      :row-style="{ height: '60px' }"
      border
      class="mt-10"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        :label="$t('tableIndex')"
        type="index"
        :index="indexAdd"
        align="center"
        width="80"
      />
      <el-table-column
        :label="$t('harvestLang.orderInfo')"
        prop="orderNo,customerCodeAndName"
        align="left"
        min-width="150"
      >
        <template slot-scope="scope">
          <p>
            {{ $t("harvestLang.orderNumber") + ":" }}
            <span>{{ scope.row.orderNo }}</span>
          </p>
          <p>
            {{ $t("goodsSKULang.customer") + ":" }}
            <span>{{ scope.row.customerCodeAndName }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('depotLang.depot')"
        prop="depotCodeAndName,transDepotName"
        min-width="160"
      >
        <template slot-scope="scope">
          <p>
            {{ $t("harvestLang.domesticTransitWarehouse") + ":" }}

            <span>{{ scope.row.transDepotName }}</span>
          </p>
          <p>
            {{ $t("harvestLang.overseasWarehouse") + ":" }}
            <span>{{ scope.row.depotCodeAndName }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('harvestLang.totalNum')"
        prop="boxNum"
        align="center"
        min-width="80"
      />
      <el-table-column
        :label="$t('statusLang.status')"
        align="center"
        prop="orderStatus"
        min-width="120"
      >
        <template slot-scope="scope">
          {{
            $t(
              "statusLang." +
                getTitleByValue(deliveryStatusOptions, scope.row.orderStatus)
            )
          }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('goodsSKULang.dateInfo')"
        prop="gmtCreated,gmtExpected,gmtArrived,gmtShelve,gmtModified"
        align="left"
        min-width="200"
      >
        <template slot-scope="scope">
          <p>
            {{ $t("preRecordedDate") + ":" }}
            <span>{{ scope.row.gmtCreated }}</span>
          </p>
          <p>
            {{ $t("estimatedArrivalDate") + ":" }}
            <span>{{ scope.row.gmtExpected }}</span>
          </p>
          <p>
            {{ $t("receivingDate") + ":" }}
            <span>{{ scope.row.gmtArrived }}</span>
          </p>
          <p>
            {{ $t("shelfDate") + ":" }}
            <span>{{ scope.row.gmtShelve }}</span>
          </p>
          <p>
            {{ $t("gmtModified") + ":" }}
            <span>{{ scope.row.gmtModified }}</span>
          </p>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('operation')"
        width="180"
        align="center"
        fixed="right"
      >
        <template v-slot="{ row }">
          <el-button type="text" @click="handleInfo(row)">
            {{ $t("info") }}
          </el-button>
          <!-- 打印 -->
          <el-button type="text" @click="handlePrint(row)">
            {{ $t("print") }}
          </el-button>
          <el-button type="text" @click="handleExportOrderBox(row)">
            {{ $t("harvestLang.packingList") }}
          </el-button>
          <el-button type="text" @click="handleExportOrderInfo(row)">
            {{ $t("harvestLang.downloadWarehouseReceipt") }}
          </el-button>
          <el-button type="text" @click="handleExportOrderSKU(row)">
            {{ $t("harvestLang.downloadInventoryDetails") }}
          </el-button>
          <el-button
            v-if="false &&
              row.orderStatus !== deliveryStatusDict.SHELVING_COMPLETE.value
            "
            type="text"
            @click="handleShelvesCompleted(row)"
          >
            上架完成
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <el-pagination
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 50, 100, 200, 1000, 2000, 5000]"
        :current-page="queryParams.pageNo"
        :page-size="queryParams.pageSize"
        @current-change="pageNoChange"
        @size-change="handleSizeChange"
      />
    </el-row>
    <!-- 详情 -->
    <info-form
      v-model="infoParams.id"
      :visible.sync="detailDialog"
      :operation="infoParams.operation"
      @close="infoClose"
    />
    <!-- 详情 -->
    <order-box
      v-model="infoParams.id"
      :visible.sync="orderBoxDialog"
      :orderboxdata="orderBoxData"
      @close="infoClose"
    />
    <!-- 打印 -->
    <el-dialog :visible.sync="printDialog" :title="$t('print')" width="700px">
      <el-form ref="Form" :model="printForm" label-width="120px">
        <el-form-item prop="type" :label="$t('printLang.printType') + ':'">
          <el-radio-group v-model="printForm.type">
            <!-- <el-radio :label="0">{{ $t("printLang.InventoryList") }}</el-radio> -->
            <el-radio :label="1">{{ $t("printLang.boxMark") }}</el-radio>
            <el-radio :label="2">{{ $t("goodsSKULang.skuCode") }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--箱唛 箱号 -->
        <el-form-item
          v-if="printForm.type === 1"
          prop="boxNumber"
          :label="$t('goodsSKULang.boxNumber')"
        >
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >{{ $t("checkAll") }}</el-checkbox>
          <div style="margin: 15px 0" />
          <el-checkbox-group
            v-model="checkedNum"
            @change="handleCheckedNumChange"
          >
            <el-checkbox v-for="num in boxNumbers" :key="num" :label="num">{{
              num
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- SKU SKU -->
        <el-form-item
          v-if="printForm.type === 2"
          :label="$t('goodsSKULang.skuCode') + ' :'"
        >
          <el-table
            :data="SKUData"
            style="width: 100%"
            border
            :header-cell-style="{
              background: 'f2f6fc',
              color: '#606266',
              'text-align': 'center',
            }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              prop="skuCode"
              :label="$t('goodsSKULang.skuCode')"
              min-width="120"
            />
            <el-table-column
              prop="skuName"
              :label="$t('goodsSKULang.goodsName')"
              min-width="120"
            />
            <el-table-column
              prop="skuNum"
              :label="$t('goodsSKULang.forecastQuantity')"
              min-width="80"
            />
            <el-table-column
              prop="receivedNum"
              :label="$t('goodsSKULang.printNum')"
            >
              <template v-slot="{ row }">
                <el-input v-model.number="row.receivedNum" type="number" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item
          prop="printFormat"
          :label="$t('printLang.printFormat') + ':'"
        >
          <div>
            <el-radio-group v-model="printForm.printFormat">
              <el-radio :label="0">{{ $t("printLang.A4Paper") }}</el-radio>
              <el-radio :label="1">{{
                $t("printLang.thermalPaper") + "(10*10)"
              }}</el-radio>
              <el-radio :label="2">{{
                $t("printLang.thermalPaper") + "(10*15)"
              }}</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="warning" plain @click="cancel">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" @click="print">{{ $t("submit") }}</el-button>
      </el-row>
    </el-dialog>
    <!-- SKU打印 -->
    <vue-easy-print
      v-show="printDialog"
      ref="easyPrint"
      table-show
      :one-page-row="onePageRow"
    >
      <template v-for="(item, i) in SKUData">
        <template v-for="index in item.receivedNum">
          <div :key="(i + 1) * (index + 1) * Math.random()" style="text-align: right">{{ mynum(i, index) }}/{{ count }} P</div>
          <div :key="(i + 1) * (index + 1) * Math.random()" style="page-break-after: always;">
            <vue-barcode
              :key="i * Math.random() + 3"
              line-color="#000"
              display-value="true"
              format="CODE128"
              font="bold"
              :value="item.skuCode"
              text-align="center"
              text-position="bottom"
              text-margin="5"
              font-size="26"
              height="60"
              width="2"
              class="barCode"
            />
          </div>
        </template>
      </template>
    </vue-easy-print>
    <!-- 箱唛打印 -->
    <vue-easy-print
      v-show="printDialog"
      ref="easyPrintBox"
      table-show
      :one-page-row="onePageRow"
    >
      <template v-for="(item, i) in newBoxPageDTOList">
        <div :key="i * Math.random() + 4" style="text-align: right">{{ i + 1 }}/{{ newBoxPageDTOList.length }} P</div>
        <div :key="i * Math.random() + 5" class="skuHead" style="text-align: center">
          <h2>Packing List</h2>
        </div>
        <div :key="i * Math.random() + 6" style="page-break-after: always;">
          <vue-barcode
            line-color="#000"
            display-value="false"
            format="CODE128"
            font="bold"
            :value="item.boxBarCode"
            text-align="center"
            text-position="bottom"
            text-margin="5"
            font-size="26"
            height="60"
            width="2"
            class="barCode"
          />
          <div :key="i * Math.random() + 7" class="skuInfo" style="">
            <div class="title">
              <span>RO:{{ item.boxBarCode }}</span>
              <span>Wh:{{ item.depotCode }}</span>
              <span>Customer Code:{{ item.customerCode }}</span>
            </div>
            <el-table :data="item.detailDTOList" style="width: 700px" border>
              <el-table-column label="No." type="index" min-width="10" align="center" />
              <el-table-column label="Product Code" prop="skuCode" min-width="20" align="center" />
              <el-table-column label="Product Name" prop="skuName" min-width="20" align="center" />
              <el-table-column label="Qty" prop="preSkuNum" min-width="20" align="center" />
            </el-table>
          </div>
          <div style="text-align: right">{{ i + 1 }}/{{ newBoxPageDTOList.length }} b</div>
        </div>
      </template>
    </vue-easy-print>

    <!-- 打印表单 -->
    <div v-if="false" id="printBox">
      <div class="skuHead" style="text-align: center">
        <h2>Packing List</h2>
      </div>
      <div class="ewm">
        <vue-barcode
          margin="20"
          line-color="#000"
          display-value="true"
          format="CODE128"
          font="bold"
          text="SKU"
          text-align="center"
          text-position="bottom"
          text-margin="15"
          font-size="26"
          class="barCode"
          :options="{
            width: 60,
            height: 50,
            background: 'rgba(255,255,255,0.5)',
          }"
        />
      </div>
      <div class="skuInfo" style="width: 100%">
        <div class="title">
          <span>RO:1</span>
          <span>Wh:R01</span>
          <span>Customer Code:a001</span>
        </div>
        <!-- <el-table :data="skuInfoData" border align="center">
          <el-table-column label="No." prop="index"></el-table-column>
          <el-table-column label="Product Code" prop="code"></el-table-column>
          <el-table-column
            label="Custom coding"
            prop="coding"
          ></el-table-column>
          <el-table-column label="Product Name" prop="name"></el-table-column>
          <el-table-column label="Qty" prop="qty"></el-table-column>
        </el-table> -->
        <table class="tablestyle">
          <caption>
            Packing List
          </caption>
          <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
          </tr>
          <tr v-for="item in skuList" :key="item.No">
            <td>{{ item.No }}</td>
            <td>{{ item.code }}</td>
            <td>{{ item.coding }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.Qty }}</td>
          </tr>
        </table>
      </div>
    </div>
    <!-- <el-button type="primary" v-print="'#printBox'">打 印</el-button> -->
    <!-- 打印箱唛 -->
  </div>
</template>

<script>
import VueBarcode from 'vue-barcode'
import vueEasyPrint from 'vue-easy-print'
// import Print from 'vue-print-nb'
import InfoForm from './components/info-form.vue'
import OrderBox from './components/order-box.vue'
import { dateTypeDict, deliveryStatusDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import { getDepotListAllStatus } from '@/api/business/depotManage/depot'
import { getCustomerNameList, exportList } from '@/api/business/inventoryManage/inventory';
import {
  getDeliveredOrderInfoPageList,
  getDeliveredOrderList,
  exportOrderInfo,
  exportOrderSku,
  modifyOrderStatusForComplete,
  getPrintOrderSku,
  getPrintOrderBoxSku
} from '@/api/business/warehouseManage/harvest'

export default {
  name: 'Harvest',
  components: { InfoForm, VueBarcode, OrderBox, vueEasyPrint },
  data() {
    return {
      productName: '',
      quantity: 0,
      checkAll: false,
      boxNumbers: [],
      checkedNum: [],
      isIndeterminate: false,
      loading: false,
      total: 0,
      customerOptionList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        orderStatus: null,
        depotId: null,
        orderNo: null,
        dateType: 0, // 默认选择下单时间
        gmtArrivedEnd: null, // 收货时间
        gmtArrivedStart: null,
        gmtCreatedEnd: null, // 预录时间
        gmtCreatedStart: null,
        gmtExpectedEnd: null, // 预计到达
        gmtExpectedStart: null,
        gmtShelveEnd: null,
        gmtShelveStart: null, // 上架
        customerId: null, // 客户ID
        skuCode: null
      },
      tableData: [],
      depotListAllStatusList: [],
      dateTypeDict: dateTypeDict,
      deliveryStatusDict: deliveryStatusDict,
      getTitleByValue: getTitleByValue,
      dateTypeOptions: getDictOptionList(dateTypeDict), // 时间下拉
      deliveryStatusOptions: getDictOptionList(deliveryStatusDict), // 状态下拉
      infoParams: {
        id: null,
        operation: null
      },
      detailDialog: false,
      orderBoxDialog: false,
      printDialog: false,
      printForm: {
        type: 1
      },
      orderBoxData: [],
      SKUData: [
        {
          sku: '123456789',
          name: '123456789',
          printNum: '123456789',
          receivedNum: 4
        }
      ],
      rowCenter: {
        textAlign: 'center'
      },
      skuInfoData: [
        {
          code: '123456789',
          coding: '123456789',
          name: '123456789',
          qty: '123456789'
        }
      ],
      skuList: [
        {
          No: 1,
          code: '123456789',
          coding: '123456789',
          name: '123456789',
          Qty: '123456789'
        }
      ],
      // 每页多少行
      onePageRow: 1,
      boxPageDTOList: [],
      newBoxPageDTOList: [],
      SKULength: 0,
      number: 0
    }
  },
  computed: {
    count() {
      return this.SKUData.reduce((prev, cur) => Number(cur.receivedNum) + prev, 0)
    },
    mynum() {
      return function(i, index) {
        let count = 0
        for (let j = 0; j < i; j++) {
          count += this.SKUData[j].receivedNum
        }
        return count + index
      }
    }
  },
  created() {
    this.getDepotListAllStatus()
    this.getDeliveredOrderInfoPageList()
    this.getCustomerNameList()
  },
  methods: {
    // 处理时间戳
    handleTimeStamp(dateTime) {
      if (dateTime) {
        const timestamp = dateTime.map((item) => item / 1000)
        // 下单时间
        if (this.queryParams.dateType === 0) {
          this.queryParams.gmtCreatedStart = timestamp[0]
          this.queryParams.gmtCreatedEnd = timestamp[1]
        } else if (this.queryParams.dateType === 1) {
          this.queryParams.gmtExpectedStart = timestamp[0]
          this.queryParams.gmtExpectedEnd = timestamp[1]
        } else if (this.queryParams.dateType === 2) {
          this.queryParams.gmtArrivedStart = timestamp[0]
          this.queryParams.gmtArrivedEnd = timestamp[1]
        } else {
          this.queryParams.gmtShelveStart = timestamp[0]
          this.queryParams.gmtShelveEnd = timestamp[1]
        }
      }
    },
    // 获取收货管理列表
    async getDeliveredOrderInfoPageList() {
      const { data } = await getDeliveredOrderInfoPageList({
        ...this.queryParams,
        orderNo: this.queryParams.orderNo?.replace(/\n/g, ' ')
      })
      this.tableData = data.deliveredOrderInfoPageDTOList
      this.total = data.totalRowNum
    },
    // 所有仓库状态下拉列表
    async getDepotListAllStatus() {
      const { data } = await getDepotListAllStatus()
      this.depotListAllStatusList = data
    },
    changeDateType(value) {
      this.handleReset()
      console.log(value) // 时间类型
      this.queryParams.dateType = value
    },
    changeDateTime(dateTime) {
      this.handleTimeStamp(dateTime)
      console.log(this.queryParams.dateTime)
    },
    // 查询
    async handleQuery() {
      this.queryParams.pageNo = 1
      this.getDeliveredOrderInfoPageList()
    },
    // 详情
    async handleInfo(row) {
      this.infoParams.id = row.orderId
      this.infoParams.operation = 0
      this.detailDialog = true
    },
    async handlePrint(row) {
      this.number = 0
      this.printDialog = true
      const { data: { boxPageDTOList: boxPageDTOList = [] }} = await getPrintOrderBoxSku({
        orderId: row.orderId
      })
      this.boxPageDTOList = boxPageDTOList
      this.newBoxPageDTOList = boxPageDTOList
      this.boxNumbers = boxPageDTOList.map(item => item.boxBarCode)

      const { data } = await getPrintOrderSku({
        orderId: row.orderId
      })
      this.SKUData = data?.boxSkuDTOList.map(item => {
        item.arr = new Array(Number(item.receivedNum)).fill(2)
        return item
      }) || []
    },
    // 重置
    async handleReset() {
      // await this.$refs.queryParams.resetFields();
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        orderStatus: null,
        depotId: null,
        orderNo: null,
        dateType: null,
        gmtArrivedEnd: null, // 收货时间
        gmtArrivedStart: null,
        gmtCreatedEnd: null, // 下单时间
        gmtCreatedStart: null,
        gmtExpectedEnd: null, // 预计到达
        gmtExpectedStart: null,
        gmtShelveEnd: null,
        gmtShelveStart: null // 上架
      }
      this.getDeliveredOrderInfoPageList()
    },
    // 导入装箱清单
    async handleExportOrderBox(row) {
      this.orderBoxDialog = true
      const res = await getDeliveredOrderList({
        orderId: row.orderId
      })
      this.orderBoxData = res?.data?.deliveredOrderInfoBoxSkuDTOList || []
    },
    // 下载入库单
    async handleExportOrderInfo(row) {
      const res = await exportOrderInfo({
        orderId: row.orderId
      })
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['入库单号', '总箱数', '状态', '仓库', '客户代码', '下单日期', '预计到达日期', '收货日期', '上架日期']
        const filterVal = ['orderNo', 'boxNum', 'orderStatusName', 'depotCodeAndName', 'customerCodeAndName', 'gmtCreated', 'gmtExpected', 'gmtArrived', 'gmtShelve']
        const list = [res.data]
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '入库单',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return v[j]
        } else {
          return v[j]
        }
      }))
    },
    // 下载入库单明细
    async handleExportOrderSKU(row) {
      const res = await exportOrderSku({
        orderId: row.orderId
      })
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['入库单号', 'SKU', '自定义编码', '状态', '产品收货状态', '产品尺寸(CM)', '产品体积(cm³)', 'SKU单重(KG)', '预报数量', '已收数量', '上架数量', 'SKU总重量(KG)', '仓库', '客户', '下单日期', '预计到达日期', '收货日期', '上架日期']
        const filterVal = ['orderNo', 'skuCode', 'customCode', 'orderStatusName', 'orderStatusName', 'skuSize', 'skuVolume', 'skuWeight', 'preSkuNum', 'receiptNum', 'shelfStockingNum', 'skuWeightTotal', 'depotCodeAndName', 'customerCodeAndName', 'gmtCreated', 'gmtExpected', 'gmtArrived', 'gmtShelve']
        const list = res.data?.deliveredOrderSkuDownloadDTOList || []
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '入库单明细',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    // 强制上架完成
    async handleShelvesCompleted(row) {
      await modifyOrderStatusForComplete({
        orderId: row.orderId
      })
      this.getDeliveredOrderInfoPageList()
    },
    pageNoChange(newPage) {
      this.queryParams.pageNo = newPage
      this.getDeliveredOrderInfoPageList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.queryParams.pageNo = 1
      this.getDeliveredOrderInfoPageList()
    },
    // type序号-页面切换递增
    indexAdd(index) {
      const page = this.queryParams.pageNo // 当前页码
      const pagesize = this.queryParams.pageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    infoClose() {
      this.infoParams.id = null
      this.infoParams.operation = null
      this.detailDialog = false
      this.orderBoxDialog = false
      this.getDeliveredOrderInfoPageList()
    },
    // 全选
    handleCheckAllChange(val) {
      this.checkedNum = val ? this.boxNumbers : []
      this.isIndeterminate = false
      this.newBoxPageDTOList = this.boxPageDTOList
    },
    // 多选
    handleCheckedNumChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.boxNumbers.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.boxNumbers.length
      if (checkedCount === 0) {
        this.newBoxPageDTOList = this.boxPageDTOList
      } else {
        this.newBoxPageDTOList = this.boxPageDTOList.filter(item => value.includes(item.boxBarCode))
      }
    },

    cancel() {
      this.printDialog = false
    },
    print() {
      // setTimeout(function() {
      //   print({
      //     printable: 'printBox', // 打印区域id
      //     type: 'html', // 打印类型是html
      //     // scanStyles: false,
      //     // targetStyles: ['*']
      //     documentTitle: '打印html页面'
      //   })
      // }, 500)
      this.SKULength = this.SKUData.reduce((accumulator, currentItem) => accumulator + currentItem.receivedNum, 0)

      console.log(this.SKULength)
      if (this.printForm.type === 1) {
        this.$refs.easyPrintBox.print()
      } else {
        this.$refs.easyPrint.print()
      }
    },
    // 获取客户名称下拉
    async getCustomerNameList() {
      const { data } = await getCustomerNameList()
      console.log(data)
      this.customerOptionList = data
    },
    async handleExport() {
      const selectedRows = this.$refs.table.store.states.selection;
      const selectedOrderIds = selectedRows.map(row => row.orderId);
      if (selectedOrderIds.length === 0) {
        this.$message.warning('请勾选需要导出的数据')
        return;
      }
      const res = await exportList(selectedOrderIds)
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['入库单号', 'sku', '状态', '产品收货状态', '产品尺寸(CM)', '产品体积(cm³)', 'SKU单重(KG)', '预报数量', '已收数量', '上架数量', 'SKU总重量(KG)', '仓库', '客户', '下单日期', '预计到达日期', '收货日期', '上架日期']
        const filterVal = ['orderNo', 'skuCode', 'orderStatusName', 'orderStatusName', 'skuSize', 'skuVolume', 'skuWeight', 'preSkuNum', 'receiptNum', 'shelfStockingNum', 'skuWeightTotal', 'depotCodeAndName', 'customerCodeAndName', 'gmtCreateds', 'gmtExcepteds', 'gmtArriveds', 'gmtShelves']
        const list = res.data
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '入库单明细',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
h2 {
  padding: 0;
  margin: 0;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-tabel--mini .el-tabel_cell {
  border: 3px solid red !important;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid red;
}
th {
  height: 20px;
}
</style>
<!-- <style lang="stylus" media="print">
@page {
  size: auto;
  margin: 0;
}

@media print {
  * {
    color: #000 !important;
  }

  table {
    width 100%
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table, tbody, thead {
    width: 100% !important;
  }

  .receipt-order-print {
    width: 100% !important;
    font-size: 14px;
  }

  table, table tr th, table tr td {
    border: 0.05rem solid #000;
    font-size: 12px;
  }

}

.receipt-order-print
  padding 12px
  line-height 1.8

  .summary
    display flex
    flex-wrap wrap

    .col1
      width 50%

  .title
    font-size 18px
    text-align center

  .common-table
    td, th
      border-color black
</style> -->
